<template>
<el-watermark :font="font" :zIndex="9999" style="height: 800px;" content="我行WORKING">
	<div>
	  <el-button  @click="dialogVisible = !dialogVisible">
		Click to open or close Dialog
	  </el-button>
	</div>
	<div>
		这些内容可以用鼠标选中<br/>
		这些内容可以用鼠标选中<br/>
		这些内容可以用鼠标选中<br/>
		这些内容可以用鼠标选中<br/>
		这些内容可以用鼠标选中<br/>
		这些内容可以用鼠标选中<br/>
		这些内容可以用鼠标选中<br/>
	</div>
	
		<WishDialog :fullscreen="false" v-model="dialogVisible">
			<template #header="data">
			  <div class="my-header">
				  <el-icon><ElemeFilled /></el-icon>
				  <el-dropdown style="margin-top: 2px;margin-left: 20px;margin-right: 20px;outline: none;cursor: pointer;">
					  <span class="el-dropdown-link">
							显示列表 <el-icon><CaretBottom /></el-icon>
					  </span>
					  <template #dropdown>
						<el-dropdown-menu>
						  <el-dropdown-item>显示结果</el-dropdown-item>
						  <el-dropdown-item>看看内容</el-dropdown-item>
						  <el-dropdown-item>说明文字{{data}}</el-dropdown-item>
						</el-dropdown-menu>
					  </template>
					</el-dropdown>
				  <span>这里是头部展示区域</span>
				  <el-icon style="float: right;cursor: pointer;"><FullScreen /></el-icon>
			  </div>
				<el-divider style="margin: 10px 0 0 0;"/>
			</template>
			<div>
				当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。 此时正文内容以 message 的值传入。 同时，我们也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open4 那样直接调用。
			</div>
			<div><el-rate v-model="value1" /></div>
		</WishDialog>
</el-watermark>
</template>

<script setup>
	import { ref } from 'vue'
import WishDialog from '../components/WishDialog.vue'
const dialogVisible = ref(true)
</script>
